<% layout('testboilerplate') -%>
<link rel="stylesheet" href="/lib/yduiCity/ydui.css" />
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.3.6/theme-chalk/index.css">

<link rel="stylesheet" href="<%=  linkPath %>/css/about.css">
<link rel="stylesheet" href="<%=  linkPath %>/css/aboutresponsive.css">

<script type="text/javascript" src="/lib/yduiCity/ydui.flexible.js"></script>
<script type="text/javascript" src="/lib/yduiCity/ydui.citys.js"></script>
<script type="text/javascript" src="/lib/yduiCity/ydui.js"></script>

<script src="https://cdn.bootcss.com/vue/2.5.11/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://cdn.bootcss.com/element-ui/2.3.6/index.js"></script>

<div class="app-wrapper">
    <a href="/about" class="backBtn">
        <img src="<%= linkPath %>/images/about/close.png" alt="">
    </a>
    <div id="vueBox">
            <el-form :model="updateInfo" :rules="rules" ref="userForm">
                <el-form-item label="姓名" prop="surnnames" :label-width="formLabelWidth">
                    <el-input v-model.sync.trim="updateInfo.surnnames" placeholder="请输入姓名" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-radio-group v-model="updateInfo.sex">
                        <el-radio class="first-radio just2radio" label="先生">先生</el-radio>
                        <el-radio class="just2radio" label="女士">女士</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-radio-group v-model="updateInfo.age">
                        <el-radio class="first-radio" label="35岁以下">35岁以下</el-radio>
                        <el-radio label="35-40岁">35-40岁</el-radio>
                        <el-radio label="40-45岁">40-45岁</el-radio>
                        <el-radio label="45岁以上">45岁以上</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="生育现状" :label-width="formLabelWidth">
                    <el-radio-group v-model="updateInfo.fertilityStatus">
                        <el-radio class="first-radio" label="未育">未育</el-radio>
                        <el-radio label="一胎">一胎</el-radio>
                        <el-radio label="二胎">二胎</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="意向" :label-width="formLabelWidth">
                    <el-radio-group v-model="updateInfo.intention">
                        <el-radio class="first-radio" label="冻卵">冻卵</el-radio>
                        <el-radio label="性别选择">性别选择</el-radio>
                        <el-radio label="代孕">代孕</el-radio>
                        <el-radio label="国内">国内</el-radio>
                        <el-radio label="国外">国外</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="安排一对一" :label-width="formLabelWidth">
                    <el-radio-group v-model="updateInfo.onToOne">
                        <el-radio class="first-radio just2radio" label="是">是</el-radio>
                        <el-radio class="just2radio" label="否">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="电话" prop="phone" :label-width="formLabelWidth">
                    <el-input v-model.sync.trim="updateInfo.phone" placeholder="请输入联系方式" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="现居地" :label-width="formLabelWidth">
                    <el-input id="J_Address" placeholder="省／自治区／直辖市" v-model.sync.trim="updateInfo.toLive"  auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <el-row class="footer" :gutter="10">
                <!--<el-col :xs="24" :sm="6">-->
                    <!--<el-button type="danger" @click="backBtn">返回</el-button>-->
                <!--</el-col>-->
                <el-col :xs="24" :sm="12" :md="6">
                    <el-button type="primary" @click="update('userForm')">立即预约</el-button>
                </el-col>
            </el-row>
    </div>
</div>

<script>
    $(function () {
      var postUserInfo = function (formData) {
          var dtd = $.Deferred();
          $.ajax({
              type: "POST",
              url: goBaseUrl + "/songbao/v1/intention",
              data: JSON.stringify(formData),
              dataType: "json",
              success: function(data){
                  if(data.Code == '200'){
                      var dataList = data.Data
                      dtd.resolve(dataList);
                  }else{
                      dtd.reject(data.Msg)
                  }
              },
              error:function (err) {
                  dtd.reject(err)
              }
          });
          return dtd.promise();
      }

      var vm = new Vue({
            el:'#vueBox',
            data:function () {
                return {
                    infoFormVisible:false,
                    formLabelWidth: '100px',
                    updateInfo:{
                        surnnames:'',
                        toLive:'',
                        intention:'冻卵',
                        onToOne:'是',
                        sex:'先生',
                        phone:'<%= phone %>',
                        age:'35岁以下',
                        fertilityStatus:'未育'
                    },
                    rules:{
                        surnnames:[
                            {required: true, message: '请输入姓名', trigger: 'blur'},
                        ],
                        phone:[
                            {required: true, message: '请输入联系号码', trigger: 'blur'},
                        ]
                    },
                }
            },
          mounted:function(){
              var that = this;
              //初始化地址选择
              var $target = $('#J_Address');

              $target.citySelect();

              $(document).on("click","#J_Address",function () {
                  event.stopPropagation();
                  $(this).citySelect('open');
              })

              $(document).on('done.ydui.cityselect','#J_Address', function (ret) {
                  vm.$nextTick(function () {
                      vm.$data.updateInfo.toLive = ret.provance + '/' + ret.city + '/' + ret.area;
                  })
              });
          },
          methods:{
              cancledialog:function(userForm){
                  //重置表单
                  this.$refs[userForm].resetFields();
              },
              backBtn:function () {
                  history.back();
              },
              update:function(formName) {
                  var that = this;
                  this.$refs[formName].validate(function(valid){
                      if (valid) {
                          $.when(postUserInfo(that.updateInfo)).done(function (v) {
                              that.$message.success({message:'提交成功',onClose:function () {
                                      location.href = '/about';
                                  }})
                          }).fail(function (v) {
                              // console.log(v)
                              this.$message.error(v)
                          })
                      } else {
                          console.log('error submit!!');
                          return false;
                      }
                  })
              }
          }
        })
    })
</script>
